<template>
    <view class="page-container" :style="{ backgroundImage: `url(${backgroundImage})` }">
      <!-- 内容区域 -->
      <view class="content-container">
        <text class="title">ZERO ONE 手工杆</text>
        <text class="sub-title">预约成功</text>
        <text class="message">感谢您对ZERO ONE的支持，ZERO ONE公司将会尽快与您取得联系。</text>
      </view>
      
      <!-- 底部按钮区域 -->
      <view class="button-container">
        <button class="ok-button" @click="goBackToHome">知道了</button>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        backgroundImage: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/yuyuechenggong.png'
      };
    },
    methods: {
      goBackToHome() {
        uni.switchTab({
          url: '/pages/index/cueIndex' 
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .page-container {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* 垂直布局 */
    justify-content: space-between; /* 内容和按钮分别位于顶部和底部 */
    padding: 20px;
  }
  
  .content-container {
    color: white;
    padding: 20px;
    margin-top: 60px; /* 顶部间距 */
  }
  
  .title {
    display: block; /* 单独一行 */
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .sub-title {
    display: block; /* 单独一行 */
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  .message {
    display: block; /* 单独一行 */
    font-size: 18px;
    line-height: 1.5; /* 行高调整 */
  }
  
  .button-container {
    text-align: center;
    margin-bottom: 60px; /* 底部间距 */
  }
  
  .ok-button {
    width: 80%; /* 按钮宽度 */
    max-width: 300px; /* 最大宽度限制 */
    background-color: rgb(40 43 47 / 86%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 20px;
    cursor: pointer;
  }
  </style>